<template>
	<view class="flex-col homepage">
		<u-steps current="0" style="width: 320px;">
			<u-steps-item title="车位信息"></u-steps-item>
			<u-steps-item title="物业审核"></u-steps-item>
			<u-steps-item title="认证成功"></u-steps-item>
		</u-steps>
		<!-- <view class="u-line-1 text">请认真填写就诊人信息</view> -->
		<view class="wrapper">

			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
				<u-form-item label="小区" labelWidth="130" prop="relotion" borderBottom ref="item1">
					<view class="container">
						<uni-data-picker placeholder="请选择小区" popup-title="请选择所在小区" :localdata="dataTree"
							v-model="form.communityId" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>

				</u-form-item>

				<u-form-item label="车位区域" labelWidth="130" prop="relotion" borderBottom ref="item1">
					<view class="container">
						<uni-data-picker placeholder="请选择车位区域" popup-title="请选择所在车位区域" :localdata="vehicleAreadata"
							v-model="form.vehicleAreaId" @change="onchange" @nodeclick="vehicleAreaclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>

				</u-form-item>
				<u-form-item label="车位编号" labelWidth="130" prop="relotion" borderBottom ref="item1">
					<view class="container">
						<uni-data-picker placeholder="请选择车位编号" popup-title="请选择所在车位编号" :localdata="vehicleNumberdata"
							v-model="form.vehicleNumberId" @change="onchange" @nodeclick="vehicleNumberclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>
				
				</u-form-item>
				<u-form-item label="车位类型" labelWidth="160" prop="sex" borderBottom ref="item1">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">
							<radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
						</label>
					</radio-group>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="绑定车辆" labelWidth="130" prop="relotion" borderBottom ref="item1">
					<view class="container">
						<uni-data-picker placeholder="请选择绑定车辆" popup-title="请选择要绑定车辆" :localdata="vehicleCardata"
							v-model="form.vehicleCarId" @change="onchange" @nodeclick="vehicleCarclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed" style="width: 300px;">
						</uni-data-picker>
					</view>
				
				</u-form-item>
				<u-form-item label="停车时间" labelWidth="160" prop="accessTime" borderBottom ref="item1">
					<!-- <u--input v-model="form.userName" border="none" placeholder="请输入真实姓名"></u--input> -->
	<!-- 				 <u-datetime-picker
					                :show="show"
									@cancel="cancel"
									@confirm="confirm"
					                v-model="value1"
					                mode="datetime"
					        ></u-datetime-picker>
							<u-button @click="show = true">打开</u-button> -->
						
							<!-- :title="'v-model用法：' + single" -->
							<uni-section  type="datetime"></uni-section>
							<view class="example-body" style="left: -30px;">
								<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.accessTime" />
							</view>
				</u-form-item>

	<!-- <u--input v-model="form.accessTime" border="none" placeholder="请选择时间"></u--input> -->


				<u-form-item label="停车时长(小时)" labelWidth="220" prop="idCard" borderBottom ref="item1">
					<u--input v-model="form.duration" border="none" placeholder="请输入停车时长" type="number"></u--input>
				</u-form-item>




	


				<u-form-item label="住户信息" labelWidth="280" borderBottom ref="item1">
				</u-form-item>
			<u-form-item label="住户姓名" labelWidth="160" prop="idCard" borderBottom ref="item1">
					<u--input v-model="username" border="none" placeholder="请输入住户姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机号" labelWidth="160" prop="idCard" borderBottom ref="item1">
					<u--input v-model="userphone" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>



			</u--form>





		</view>


		<u-button @click="save" class="button">
			提交审核
		</u-button>
	</view>
</template>
<script>
	let userId = localStorage.getItem("userId")
	  ? JSON.parse(localStorage.getItem("userId"))
	  : null;
	let userInfo = localStorage.getItem("userInfo")
		? JSON.parse(localStorage.getItem("userInfo"))
	    : null;
	import request from '../../../request.js'
	export default {
		data() {
			return {
				dataTree: [],
				vehicleAreadata:[],
				vehicleNumberdata:[],
				vehicleCardata:[],
				username:userInfo.userName,
				userphone:userInfo.phone,
				

				communityId:'',
				vehicleAreaId:'',
				vehicleNumberId:'',
				single: '',
				show: false,
				value1: Number(new Date()),
				sex: [{
					label: "私有",
					value: "私有",
					checked: true
				}, {
					label: "租赁",
					value: "租赁"
				}],

				form: {
					userId:userInfo.userId,
					communityId:'',
					vehicleAreaId:'',
					vehicleNumberId:'',
					vehicelType:"私有",
					vehicleCarId:'',
					accessTime:'',
					duration:''
				},

			}
		},
		onLoad() {
			this.findCommunity()
			this.findVehicleCar()
		},
		methods: {
			confirm(){
				this.form.accessTime=this.value1
				this.show=false
			},
				cancel(){
					this.show=false
				},
			    radioChange(e) {
				this.form.vehicelType = this.radio = e.detail.value
				console.log(this.form.vehicelType)
			    },



			save() {
				console.log("+++++++++++"+JSON.stringify(this.form))
					request({
						url: '/carshop/vehicle-car/appudData',
						data: this.form,
						method: 'POST',
						success: (res) => {
							console.log(res)
							// localStorage.setItem("appUserInfo",JSON.stringify(this.form))
							if (res.data.code == 20000) {
								console.log(res.data)
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
								/* 页面跳转 */
								setTimeout(() => {
									uni.navigateTo({
										url: './mystall'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: '提交审核失败,信息错误',
									icon: 'error'
								})
							}
						}
					})


			},
			
			findVehicleCar() {
				request({
					url: '/carshop/vehicle-car/appFindVehicleCar/'+userId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.vehicleCar)
							let aa = res.data.data.vehicleCar
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: aa[i].vehicleNumber+" "+aa[i].vehicleBrand+aa[i].vehicleModel+"-"+aa[i].vehicleColor,
									value: aa[i].vehicleCarId
								}
								this.vehicleCardata.push(param)
							}
			
						}
					}
				})
			},
			findVehicleNumber() {
				request({
					url: '/carshop/vehicle-number/appFindVehicleNumber/'+this.vehicleAreaId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.vehicleNumber)
							let aa = res.data.data.vehicleNumber
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: aa[i].serialNumber,
									value: aa[i].vehicleNumberId
								}
								this.vehicleNumberdata.push(param)
							}
			
						}
					}
				})
			},
			findVehicleArea() {
				request({
					url: '/carshop/vehicle-area/appFindVehicleArea/'+this.communityId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.vehicleAreas)
							let aa = res.data.data.vehicleAreas
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: aa[i].area,
									value: aa[i].vehicleAreaId
								}
								this.vehicleAreadata.push(param)
							}
			
						}
					}
				})
			},
			
			findCommunity() {
				request({
					url: '/housingestate/community/appFindAllCommunity',
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log(res.data.data.community)
							let aa = res.data.data.community
							for (var i = 0; i < aa.length; i++) {
								var param = {
									text: aa[i].communityName,
									value: aa[i].communityId
								}
								this.dataTree.push(param)
							}
			
						}
					}
				})
			},
			
			onnodeclick(e) {
				this.communityId=e.value
				this.findVehicleArea()
				this.vehicleAreadata=[]
				console.log(this.communityId);
				console.log(e);
			},
			vehicleAreaclick(e){
				this.vehicleAreaId=e.value
				this.findVehicleNumber()
				this.vehicleNumberdata=[]
				console.log(this.vehicleAreaId);
				console.log(e);
				
			},
			vehicleNumberclick(e){
				this.vehicleNumberId=e.value
				console.log(this.vehicleNumberId);
				console.log(e);
			},
			vehicleCarclick(e){
				console.log(e);
			},
			
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
		},
		onShow() {

		},






	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0px 0px;
	}


	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 46rpx 35rpx 0rpx 35rpx;

		.text {
			width: 100%;
			height: 42rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			color: #bab3b5;
		}

		.wrapper {
			width: 678rpx;
			height: 800rpx;
			margin-bottom: 56rpx;
			border-top-width: 2rpx;
			border-top-style: solid;
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
		}


		.upload {

			width: 100%;
			top: 50rpx;
			padding-left: 24rpx;
		}

		.upload1 {
			width: 100%;
			top: 100rpx;
			padding-left: 24rpx;
		}

		.wrapper-two {
			width: 678rpx;
			justify-content: center;
			padding: 29rpx 0rpx;
			border-radius: 20rpx;
			background: #f7f7f8;

			.text-two {
				width: 650rpx;
				height: 114rpx;
				color: #c5bbc6;
			}
		}

		.button {
			width: 694rpx;
			height: 90rpx;
			bottom: -280rpx;
			display: block;
			margin-right: auto;
			margin-left: auto;
			font-size: 36rpx;
			background: #006eff;
			color: #ffffff;
		}
	}
</style>
